import * as echarts from "echarts"

export function echart_1(data) {

    if (data == null) {
        data = [{
            value: 6, name: '故障'
        }, {
            value: 50, name: '正常', selected: true
        }]
    }

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart_1'));
    let option = {
        title: {
            text: '设备状态统计', top: 35, left: 20, textStyle: {
                fontSize: 16, color: '#fff'
            }
        }, toolbox: {
            show: true, feature: {
                saveAsImage: {
                    title: '保存为图片', show: true, excludeComponents: ['toolbox'], pixelRatio: 2
                }
            }
        }, tooltip: {
            trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)",

        }, legend: {
            right: 20, top: 35, data: ['静止', '工作', '强拆'], textStyle: {
                color: '#fff'
            }
        }, series: [{
            name: '设备状态',
            type: 'pie',
            radius: ['0', '42%'],
            center: ['50%', '60%'],
            color: ['#e72325', '#98e002', '#2ca3fd'],
            label: {
                normal: {
                    formatter: '{b}: {c}辆'
                },

            },
            data: data
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

export function echart_2() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart_2'));
    const data = {
        id: 'multipleBarsLines',
        title: '2023年前半年设备统计',
        legendBar: ['正面占比', '中立占比', '负面占比'],
        symbol: '', //数值是否带百分号        --默认为空 ''
        legendLine: ['同期对比'],
        xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
        yAxis: [[0, 0, 15, 0, 0, 0]],
        lines: [[0, 0, 15, 0, 0, 0]],
        barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
        lineColor: ['#D9523F'], // 折线颜色

    };
    /////////////end/////////

    const myData = (function test() {
        var yAxis = data.yAxis || [];
        var lines = data.lines || [];
        var legendBar = data.legendBar || [];
        var legendLine = data.legendLine || [];
        var symbol = data.symbol || ' ';
        var seriesArr = [];
        var legendArr = [];
        yAxis && yAxis.forEach((item, index) => {
            legendArr.push({
                name: legendBar && legendBar.length > 0 && legendBar[index]
            });
            seriesArr.push({
                name: legendBar && legendBar.length > 0 && legendBar[index],
                type: 'bar',
                barGap: '0.5px',
                data: item,
                barWidth: data.barWidth || 12,
                label: {
                    normal: {
                        show: true, formatter: '{c}' + symbol, position: 'top', textStyle: {
                            color: '#fff', fontStyle: 'normal', fontFamily: '微软雅黑', textAlign: 'left', fontSize: 11,
                        },
                    },
                },
                itemStyle: { //图形样式
                    normal: {
                        barBorderRadius: 4, color: data.barColor[index]
                    },
                }
            });
        });

        lines && lines.forEach((item, index) => {
            legendArr.push({
                name: legendLine && legendLine.length > 0 && legendLine[index]
            })
            seriesArr.push({
                name: legendLine && legendLine.length > 0 && legendLine[index], type: 'line', data: item, itemStyle: {
                    normal: {
                        color: data.lineColor[index], lineStyle: {
                            width: 3, type: 'solid',
                        }
                    }
                }, label: {
                    normal: {
                        show: false, //折线上方label控制显示隐藏
                        position: 'top',
                    }
                }, symbol: 'circle', symbolSize: 10
            });
        });

        return {
            seriesArr, legendArr
        };
    })();


    let option = {
        title: {
            show: true, top: '10%', left: '3%', text: data.title, textStyle: {
                fontSize: 18, color: '#fff'
            }, subtext: data.subTitle, link: ''
        }, tooltip: {
            trigger: 'axis', formatter: function (params) {
                let time = '';
                let str = '';
                for (const i of params) {
                    time = i.name.replace(/\n/g, '') + '<br/>';
                    if (i.data == 'null' || i.data == null) {
                        str += i.seriesName + '：无数据' + '<br/>'
                    } else {
                        str += i.seriesName + '：' + i.data + '%<br/>'
                    }

                }
                return time + str;
            }, axisPointer: {
                type: 'none'
            },
        }, legend: {
            // right: data.legendRight || '30%',
            top: '12%', right: '5%', itemGap: 16, itemWidth: 10, itemHeight: 10, data: myData.legendArr, textStyle: {
                color: '#fff', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12,
            }
        }, grid: {
            x: 30, y: 80, x2: 30, y2: 60,
        }, xAxis: {
            type: 'category', data: data.xAxis, axisTick: {
                show: false,
            },

            axisLine: {
                show: true, lineStyle: {
                    color: '#1AA1FD',
                }, symbol: ['none', 'arrow']
            }, axisLabel: {
                show: true, interval: '0', textStyle: {
                    lineHeight: 16, padding: [2, 2, 0, 2], height: 50, fontSize: 12,
                }, rich: {
                    Sunny: {
                        height: 50, // width: 60,
                        padding: [0, 5, 0, 5], align: 'center',
                    },
                }, formatter: function (params) {
                    let newParamsName = "";
                    let splitNumber = 5;
                    const paramsNameNumber = params && params.length;
                    if (paramsNameNumber && paramsNameNumber <= 4) {
                        splitNumber = 4;
                    } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                        splitNumber = 4;
                    } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                        splitNumber = 5;
                    } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                        splitNumber = 5;
                    } else {
                        params = params && params.slice(0, 15);
                    }

                    const provideNumber = splitNumber; //一行显示几个字
                    const rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                    if (paramsNameNumber > provideNumber) {
                        for (let p = 0; p < rowNumber; p++) {
                            let tempStr = "";
                            const start = p * provideNumber;
                            const end = start + provideNumber;
                            if (p === rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    params = newParamsName;
                    return '{Sunny|' + params + '}';
                }, color: '#1AA1FD',
            },

        }, yAxis: {
            axisLine: {
                show: true, lineStyle: {
                    color: '#1AA1FD',
                }, symbol: ['none', 'arrow']
            }, type: 'value', axisTick: {
                show: false
            }, axisLabel: {
                show: false
            }, splitLine: {
                show: false, lineStyle: {
                    color: '#1AA1FD', type: 'solid'
                },
            }
        }, series: myData.seriesArr
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    // 不优雅的解决当前图表过大的问题
    setTimeout(() => {
        myChart.resize();
    }, 200);
}

export function echart_3() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart_3'));

    function showProvince() {
        const geoCoordMap = {
            '河池': [108.085179, 24.700488],
            '柳州': [109.412578, 24.354875],
            '梧州': [111.323462, 23.478238],
            '南宁': [108.359656, 22.81328],
            '北海': [109.171374, 21.477419],
            '崇左': [107.347374, 22.377503]
        };
        const data = [{
            name: '河池', value: 100
        }, {
            name: '柳州', value: 100
        }, {
            name: '梧州', value: 100
        }, {
            name: '北海', value: 100
        }, {
            name: '崇左', value: 100
        }];
        const max = 480, min = 9; // todo
        const maxSize4Pin = 100, minSize4Pin = 20;
        const convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name, value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        myChart.setOption({
            title: {
                text: '设备分布', subtext: '', x: 'center', textStyle: {
                    color: '#FFF'
                }, left: '6%', top: '10%'
            }, legend: {
                orient: 'vertical', y: 'bottom', x: 'right', data: ['pm2.5'], textStyle: {
                    color: '#fff'
                }
            }, visualMap: {
                show: false, min: 0, max: 500, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本
                calculable: true, seriesIndex: [1], inRange: {}
            }, geo: {
                show: true, map: 'guangxi', mapType: 'guangxi', label: {
                    normal: {}, //鼠标移入后查看效果
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }, //鼠标缩放和平移
                roam: true, itemStyle: {
                    normal: {
                        //          	color: '#ddd',
                        borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: {
                            type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{
                                offset: 0, color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                            }], globalCoord: false // 缺省为 false
                        }, shadowColor: 'rgba(128, 217, 248, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10
                    }, emphasis: {
                        areaColor: '#389BB7', borderWidth: 0
                    }
                }
            }, series: [{
                name: 'light', type: 'map', coordinateSystem: 'geo', data: convertData(data), itemStyle: {
                    normal: {
                        color: '#F4E925'
                    }
                }
            }, {
                name: '点', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: function (val) {
                    const a = (maxSize4Pin - minSize4Pin) / (max - min);
                    let b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                }, label: {
                    normal: {
                        // show: true,
                        // textStyle: {
                        //     color: '#fff',
                        //     fontSize: 9,
                        // }
                    }
                }, itemStyle: {
                    normal: {
                        color: '#F62157', //标志颜色
                    }
                }, zlevel: 6, data: convertData(data),
            }, {
                name: 'light', type: 'map', mapType: 'hunan', geoIndex: 0, aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: false
                    }, emphasis: {
                        show: false, textStyle: {
                            color: '#fff'
                        }
                    }
                }, roam: true, itemStyle: {
                    normal: {
                        areaColor: '#031525', borderColor: '#FFFFFF',
                    }, emphasis: {
                        areaColor: '#2B91B7'
                    }
                }, animation: false, data: data
            }, {
                name: ' ', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 5)), symbolSize: function (val) {
                    return val[2] / 10;
                }, showEffectOn: 'render', rippleEffect: {
                    brushType: 'stroke'
                }, hoverAnimation: true, label: {
                    normal: {
                        formatter: '{b}', position: 'right', show: true
                    }
                }, itemStyle: {
                    normal: {
                        color: '#05C3F9', shadowBlur: 10, shadowColor: '#05C3F9'
                    }
                }, zlevel: 1
            },

            ]
        });
    }

    showProvince();

    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

export function echart_4(arg) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart_4'));
    const data = [];
    const barData = [];  // 进度条的最大值数组
    const valdata = [];

    console.log(arg);
    const titlename = [];
    for (let i = 0; i < arg.length; i++) {
        // 因为echart不能传递对象，可以把对象变成字符串
        titlename.push(JSON.stringify(arg[i]))

        data[i] = arg[i].pm25;
        barData.push(300);
        valdata.push(5)
    }
    const myColor = ['#00e736', '#ffff1f', '#ff7600', '#ff0000', '#aa0045', '#8d0018'];
    let option = {
        title: {
            text: '工地PM10平均值(ug/m³)', x: 'center', textStyle: {
                color: '#FFF'
            }, left: '6%', top: '6%'
        }, //图标位置
        grid: {
            top: '14%', left: '36%'
        }, xAxis: {
            show: false
        }, yAxis: [{
            show: true, data: titlename, inverse: true, axisLine: {
                show: false
            }, splitLine: {
                show: false
            }, axisTick: {
                show: false
            }, axisLabel: {
                color: '#fff', formatter: (value) => {
                    let result;
                    console.log(value);
                    let item = JSON.parse(value);
                    result = '{title|' + item.name + '}'
                    if (item.mf_qy === 1) {
                        result += '{badge|标杆}';
                    }

                    return result;
                }, rich: {
                    title: {}, badge: {
                        // display: 'inline-block',
                        minWidth: 10,
                        padding: 3, // fontSize: 12,
                        fontWeight: 700, // lineHeight: 1,
                        color: '#fff',
                        textAlign: 'center',
                        whiteSpace: 'nowrap',
                        verticalAlign: 'middle',
                        backgroundColor: 'green',
                        borderRadius: 10
                    }, lg: {
                        backgroundColor: '#339911', color: '#fff', borderRadius: 15, // padding: 5,
                        align: 'center', width: 15, height: 15
                    },
                }
            },


        }, {
            show: false,  // 每个进度条尾部的文字是否显示
            inverse: true, data: valdata, axisLabel: {
                textStyle: {
                    fontSize: 12, color: '#fff',
                },
            }, axisLine: {
                show: false
            }, splitLine: {
                show: false
            }, axisTick: {
                show: false
            },

        }], series: [{
            name: '条', type: 'bar', yAxisIndex: 0, data: data, barWidth: 10, itemStyle: {
                normal: {
                    barBorderRadius: 20, color: function (params) {
                        console.log(params);
                        if (params.value >= 0 && params.value <= 50) {
                            return myColor[0]
                        } else if (params.value <= 100) {
                            return myColor[1]
                        } else if (params.value <= 150) {
                            return myColor[2]
                        } else if (params.value <= 200) {
                            return myColor[3]
                        } else if (params.value <= 300) {
                            return myColor[4]
                        } else {
                            return myColor[5]
                        }
                    },
                }
            }, label: {
                normal: {
                    show: true, color: 'black', position: 'inside', formatter: '{c}'
                }
            },
        }, {
            name: '框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: barData, barWidth: 15, itemStyle: {
                normal: {
                    color: 'none', borderColor: '#00c1de', borderWidth: 3, barBorderRadius: 15,
                }
            }
        },]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // window.addEventListener("resize", function () {
    //     myChart.resize();
    // });
}
